<template>
	<div id="shopping">
		<div class="shop_div">
			<p>我的全部购物车（2）</p>
		</div>
		<div class="shop-table1">
			<p>沃尔玛</p>
			<div class="shangpin">
				<img src="../assets/shopping/fanqie.png" />
				<div class="jiage">
					<span>番茄250g/份</span>
					<div class="zongjia">
						<span>￥33.6 x 3</span>
						<span class="zong">¥99.9</span>
					</div>
				</div>
			</div>
			<div class="shangpin">
				<img src="../assets/shopping/yingtao.png" />
				<div class="jiage">
					<span>樱桃250g/份</span>
					<div class="zongjia">
						<span>￥50 x 3</span>
						<span class="zong">¥150</span>
					</div>
				</div>
			</div>
			<div class="xiala">
				<span style="padding-right: 8px;">共计6件/1.5kg</span>
				<span>﹀</span>
			</div>
		</div>
		<div class="fenge">
			
		</div>
		<div class="shop-table1">
			<p>京东7FRESH七鲜</p>
			<div class="shangpin">
				<img src="../assets/shopping/juzi.png" />
				<div class="jiage">
					<span>香橙250g/份</span>
					<div class="zongjia">
						<span>￥18.8 x 3</span>
						<span class="zong">¥56.4</span>
					</div>
				</div>
			</div>
			<div class="shangpin">
				<img src="../assets/shopping/tizi.png" />
				<div class="jiage">
					<span>葡萄250g/份</span>
					<div class="zongjia">
						<span>￥45.9 x 3</span>
						<span class="zong">¥92.7</span>
					</div>
				</div>
			</div>
		</div>
		<div class="fenge">
			
		</div>
		<div class="shop-table1">
			<p>百果园</p>
			<div class="shangpin">
				<img src="../assets/shopping/huolongguo.png" />
				<div class="jiage">
					<span>火龙果250g/份</span>
					<div class="zongjia">
						<span>￥50 x 3</span>
						<span class="zong">¥150</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style>
	#shopping {
		margin: 0;
		padding: 0;
		height: 100%;
		position: fixed;
		width: 100%;
		background: #f8f8f8;
	}

	.shop_div {
		height: 44px;
		background: #FFFFFF;
		margin-bottom: 11px;
	}

	.shop_div p {
		font-size: 16px;
		color: #333333;
		text-align: center;
		padding-top: 11px;
	}

	.shop-table1 {
		background: #FFFFFF;
		border-radius: 4px;
		margin-left: 18px;
		margin-right: 18px;
		padding-bottom: 16px;
	}

	.shop-table1 p {
		font-size: 16px;
		color: #333333;
		padding-left: 16px;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.shangpin {
		display: flex;
		padding-left: 18px;
		align-items: flex-start;
		padding-bottom: 16px;
	}

	.shangpin img {
		width: 46px;
		height: 46px;
		padding-right: 16px;
	}

	.jiage {
		width: 100%;
	}

	.jiage span {
		font-size: 14px;
		color: #333333;
	}

	.zongjia {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding-top: 6px;
	}
	.zongjia span{
		font-size: 14px;
		color: #E93B3B;
	}
	.zongjia .zong{
		color: #000000;
		font-size: 14px;
		padding-right: 16px;
	}
	.xiala{
		background: #F5F5F5;
		margin-left: 16px;
		margin-right: 16px;
		height: 28px;
		display: flex;
		justify-content: center;
		align-items: center; 
	}
	.xiala span{
		font-size: 14px;
		color: #999999;
	}
	.fenge{
		background: #f8f8f8;
		height: 10px;
		margin-bottom: 16px;
	}
</style>
